<template>
  <div class="partal">
    <div class="partalroom">
      <!-- 使用 grid-row 控制每个 item 的所占格子的大小 -->
      <div class="g-container">
        <div class="g-item">
          <router-link to="map3D" class="back8">
            <div class="logosub logo8"></div>
            二三维可视化
          </router-link>
        </div>
        <div class="g-item">
          <router-link to="/" class="back7">
            <div class="logosub logo7"></div>
            大数据展示
          </router-link>
        </div>
        <div class="g-item">
          <router-link to="/" class="back6">
            <div class="logosub logo6"></div>
            综合统计分析
          </router-link>
        </div>
        <div class="g-item">
          <router-link to="bigindex" class="back2">
            <div class="logosub logo2"></div>
            数据管理</router-link
          >
        </div>
        <div class="g-item">
          <router-link to="ERP" class="back1">
            <div class="logosub logo1"></div>
            业务平台
          </router-link>
        </div>
        <div class="g-item">
          <router-link to="/" class="back4">
            <div class="logosub logo4"></div>
            用户管理
          </router-link>
        </div>
        <div class="g-item">
          <router-link to="index" class="back3">
            <div class="logosub logo3"></div>
            系统管理</router-link
          >
        </div>
        <div class="g-item">
          <router-link to="/" class="back5">
            <div class="logosub logo5"></div>
            系统帮助
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "portal"
};
</script>

<style scoped lang="scss">
.partal {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/images/portal/背景.jpg");
  background-size: 100% 100%;
}

.partalroom {
  width: 80%;
  height: 60%;
}

$count: 8;

@function randomNum($max, $min: 0, $u: 1) {
  @return ($min + random($max)) * $u;
}

@function randomColor() {
  @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

.g-container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

@for $i from 1 to $count + 1 {
  .g-item:nth-child(#{$i}) {
    position: relative;
    // background: randomColor();
    margin: 0.5vw;

    // &::after {
    //   // content: "#{$i}";
    //   position: absolute;
    //   color: #fff;
    //   font-size: 2vw;
    //   top: 50%;
    //   left: 50%;
    //   transform: translate(-50%, -50%);
    // }
  }
}

.g-item {
  background-color: rgba(0, 0, 0, 0.1);
  .back1 {
    background-image: url("../assets/images/portal/主页_03.png");
    background-size: contain;
  }
  .back2 {
    background-image: url("../assets/images/portal/主页_08.png");
    background-size: contain;
  }
  .back3 {
    background-image: url("../assets/images/portal/主页_05.png");
    background-size: contain;
  }
  .back4 {
    background-image: url("../assets/images/portal/主页_19.png");
    background-size: contain;
  }
  .back5 {
    background-image: url("../assets/images/portal/主页_16.png");
    background-size: contain;
  }
  .back6 {
    background-image: url("../assets/images/portal/主页_14.png");
    background-size: contain;
  }
  .back7 {
    background-image: url("../assets/images/portal/主页_17.png");
    background-size: contain;
  }
  .back8 {
    background-image: url("../assets/images/portal/主页_13.png");
    background-size: contain;
  }

  a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2rem;
    font-family: "黑体";
    .logosub {
      position: absolute;
      width: 40px;
      height: 40px;
      left: 8px;
      top: 8px;
    }
    .logo1 {
      background-image: url("../assets/images/portal/图标 (1).png");
      background-size: 100% 100%;
    }
    .logo2 {
      background-image: url("../assets/images/portal/图标 (2).png");
      background-size: 100% 100%;
    }
    .logo3 {
      background-image: url("../assets/images/portal/图标 (3).png");
      background-size: 100% 100%;
    }
    .logo4 {
      background-image: url("../assets/images/portal/图标 (4).png");
      background-size: 100% 100%;
    }
    .logo5 {
      background-image: url("../assets/images/portal/图标 (5).png");
      background-size: 100% 100%;
    }
    .logo6 {
      background-image: url("../assets/images/portal/图标 (6).png");
      background-size: 100% 100%;
    }
    .logo7 {
      background-image: url("../assets/images/portal/图标 (7).png");
      background-size: 100% 100%;
    }
    .logo8 {
      background-image: url("../assets/images/portal/图标 (8).png");
      background-size: 100% 100%;
    }
  }
  &:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  &:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  &:nth-child(3) {
    grid-column: 3;
    grid-row: 1 / 5;
  }

  &:nth-child(4) {
    grid-column: 4;
    grid-row: 1 / 6;
  }

  &:nth-child(5) {
    grid-column: 1;
    grid-row: 3 / 9;
  }

  &:nth-child(6) {
    grid-column: 2;
    grid-row: 4 / 9;
  }

  &:nth-child(7) {
    grid-column: 3;
    grid-row: 5 / 9;
  }

  &:nth-child(8) {
    grid-column: 4;
    grid-row: 6 / 9;
  }
}
</style>
